<template>
    <div class="pay-way">
        <ul class="pay-way-list positionR">
            <li class="pay-way-title displayFlex">
                <span class="flex1">
                    <span class="cancle-pay" @click="$emit('colsePayWay')">取消</span>
                </span>
                <span class="pay-title flex1">
                    支付订单
                </span>
                <span class="flex1"></span>
            </li>
            <li class="pay-way-description">选择支付方式</li>
            <li class="pay-way-option displayFlex justifyCtBwt" v-for="(value,key) in selectedList" v-if="(value.name == 'WECHAT' && (v_is_weixin || !v_is_alipay) && key == 1) || (value.name == 'ALIPAY' && (v_is_alipay || !v_is_weixin) && key == 2) || key == 0" @click="selectPayWay(value.name)" >
                <span class="pay-way-item flex1 displayFlex">
                    <span class="item-wimg displayFlex flexCenter">
                        <img v-if="value.name == 'ACCOUNT'" class="item-img" src="../../../assets/images/order/hkhw_pay_icon.png" alt="">
                        <img v-else-if="value.name == 'WECHAT'" class="item-img" src="../../../assets/images/order/wx_pay_icon.png" alt="">
                        <img v-else-if="value.name == 'ALIPAY'" class="item-img" src="../../../assets/images/order/zfb_pay_icon.png" alt="">
                    </span>
                    <span class="flex1" v-if="value.name == 'ACCOUNT'">
                        <p class="width-full pay-way-text">零钱支付</p>
                        <span class="pay-description account-money">可用余额{{payWay.accountMoney}}</span>
                    </span>
                    <span class="flex1" v-else-if="value.name == 'WECHAT'" >
                        <p class="width-full pay-way-text">微信支付</p>
                        <span class="pay-description ">微信安全支付</span>
                    </span>
                     <span class="flex1" v-else-if="value.name == 'ALIPAY'" >
                        <p class="width-full pay-way-text">支付宝支付</p>
                        <span class="pay-description ">支付宝安全支付</span>
                    </span>
                </span>
                <span class="pay-way-select text-right displayFlex flexCenter">
                    <img class="select-img" v-if="value.select" src="../../../assets/images/cart/cart_select.png" alt="">
                    <img class="select-img" v-else src="../../../assets/images/cart/cart_not_select.png" alt="">
                </span>
            </li>
            <li class="pay-wbtn width-full displayFlex flexCenter">
                <button class="pay-btn" @click="toPay">支付￥{{payWay.payMoney}}</button>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "PayWay",
        props:{payWayProp:Object},
        data(){
            return{
                payWayShow:true,
                payWay:{
                    payMoney:0,
                    accountMoney:0,
                },
                selectedList:[
                    {
                        name:'ACCOUNT',
                        select:false,
                    },
                    {
                        name:'WECHAT',
                        select:true,
                    },
                    {
                        name:'ALIPAY',
                        select:false,
                    },
                ],
            }
        },
        mounted(){
            this.payWay = Object.assign({},this.payWay,this.payWayProp);
        },
        methods:{
            selectPayWay(payWayName){
                let that = this;
                that.selectedList.forEach((value,index)=>{
                    that.selectedList[index].select = false;
                    if(payWayName == value.name){
                        that.selectedList[index].select = true;
                    }
                })
            },
            toPay(){
                let that = this;
                that.selectedList.forEach((value,index)=>{
                    if(value.select){
                        that.$emit('toPay',value.name);
                    }
                })
            }
        },
        watch:{
            payWayProp(val){
                this.payWay = Object.assign({},this.payWay,val);
            }
        }
    }
</script>

<style scoped lang="scss">
    .pay-way-title{
        height: .44rem;
        line-height: .44rem;
        padding: 0 .15rem;
        color: #666666;
        border-bottom: 1px solid #F0F0F0;
    }
    .pay-title{
        font-size: .15rem;
        color: #333333;
        text-align: center;
    }
    .cancle-pay{
        font-size: .14rem;
        color: #666666;
    }
    .pay-way-description{
        margin-left: .15rem;
        padding: .3rem .15rem .15rem 0;
        border-bottom: 1px solid #F0F0F0;
    }
    .pay-way-option{
        margin-left: .15rem;
        padding: .16rem .15rem .16rem 0;
        border-bottom: 1px solid #F0F0F0;
    }
    .item-wimg{
        padding-right: .15rem;
    }
    .item-img{
        width: .24rem;
    }
    .pay-description{
        color: #BFBFBF;
        font-size: .12rem;
    }
    .account-money{
        color: #56B78C;
    }
    .pay-way-text{
        font-size: .15rem;
        color: #222;
    }
    .pay-wbtn{
        position: absolute;
        bottom: .1rem;
        left: 0;
        text-align: center;
    }
    .pay-btn{
        width: 80%;
        font-size: .15rem;
        color: #fff;
        text-align: center;
        height: .4rem;
        line-height: .4rem;
        border-radius: .25rem;
        background-image:linear-gradient(to right,#9EBDFF,#5D89E8) ;
    }
    .pay-way,.pay-way-list{
        height: 100%;
    }
</style>